<template>
	<div class="app-container">
		<el-form :model="form" ref="queryRef" :inline="true" label-width="106px">
			<div class="bgWhite radius8 pb30">
				<div class=" fb fs16 border-bottom pl30 line-64">
					查看历史成本
				</div>
				<div class="p20">
					<el-form-item label="商品名称" prop="commodityName">
						<el-input size="large" disabled v-model="queryParams.commodityName" style="width: 248px"
							placeholder="请填写" />
					</el-form-item>
					<el-form-item label="选择日期" prop="yearMonth">
						<el-date-picker v-model="queryParams.yearMonth" type="year" size="large" placeholder="选择年"
							@change="listDataStatistics">
						</el-date-picker>
					</el-form-item>
				</div>
				<div class="plr30">
					<div class="plr30 pt30 pb30 radius8" style="box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
						<div class="" id="my_bar_chart" style="height: 420px;"></div>
					</div>
				</div>
				<div class="mb20 pl30 border-bottom pb25 pr30 mt30 flex col-center row-between">
					<div>
						<span class="fb">成本列表</span>
						<div class="color-red fs14 mt10">
							<span class="mr10">库存成本：¥{{inventoryCostPrice}}</span> 
							<span>实时成本：¥{{realTimeCostPrice}}</span>
						</div>
					</div>
					<el-button type="defaultBtn" @click="exportVersion" style="height: 32px;width: 70px;">
						导出
					</el-button>
				</div>
				<div class="p20">
					<el-table :data="list" style="width: 100%;text-align: center;"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
						<el-table-column prop="yearMonth" label="时间" />
						<el-table-column prop="inventoryCost" label="库存成本（元/吨）">
							<template v-slot="scope">
								{{scope.row.inventoryCost ||'-'}}
							</template>
						</el-table-column>
						<el-table-column prop="realTimeCost" label="实时成本（元/吨）">
							<template v-slot="scope">
								{{scope.row.realTimeCost ||'-'}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</el-form>

	</div>
</template>
<script>
	import {
		costListDetail, //详情
		listDataStatistics, //历史详情
	} from "@/api/business/cost";
	import {
		resetForm,
	} from '@/utils/ruoyi' //重置
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				queryParams: {
					productRecipeId: '', //配方id
					commodityId: '', //商品id
					yearMonth: '2024', //年
				},
				year:[],
				inventoryCost:[],//库存
				realTimeCost:[],//实时库存
				list:[],
				inventoryCostPrice:0,
				realTimeCostPrice:0
			}
		},
		created() {
			this.queryParams.productRecipeId = this.$route.query.id ? this.$route.query.id : ''
			this.costListDetail()
		
		},
		methods: {
			init() {
				this.barChart.setOption({
					tooltip: {
						trigger: 'item',
						show: true //是否显示提示框
					},
					title: {
						text: "数据图",
						textStyle: {
							color: "#333", // 标题颜色
							fontSize: 16, // 默认值：18
							fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
						},
					},
					grid: {
						left: "40px",
						right: "10px",
						bottom: "30px",
						// width:"24px"//柱状图宽度
					},
					xAxis: {
						show: true,
						axisTick: {
							show: false,
							length: 20 // 竖线的长度
						},
						data: this.year
					},
					yAxis: {
						axisLabel: {
							show: true
						}
					},
					series: [{
							name: "库存成本",
							type: "bar", // 设置图表类型为柱状
							color: 'rgba(77, 172, 177, 1)',
							data: this.inventoryCost,
							barWidth: 24,
						},
						{
							name: "实时成本",
							type: "bar", // 设置图表类型为柱状
							color: '#FFC300',
							data: this.realTimeCost,
							barWidth: 24,
						},
					]
				});
			},
			
			//详情
			costListDetail() {
				costListDetail(this.queryParams.productRecipeId).then(res => {
					this.queryParams.commodityId = res.data.commodityId
					this.queryParams.commodityName = res.data.productName
					this.listDataStatistics()
				})
			},
			// 历史详情
			listDataStatistics() {
				listDataStatistics(this.queryParams).then(res => {
					this.list = res.data
					let price1 = 0
					let price2 = 0
					for(let key in this.list){
						this.year.push(this.list[key].yearMonth)
						this.inventoryCost.push(this.list[key].inventoryCost*1)
						this.realTimeCost.push(this.list[key].realTimeCost*1)
						price1+=this.list[key].inventoryCost*1
						price2+=this.list[key].realTimeCost*1
					}
					this.realTimeCostPrice = price1.toFixed(2)
					this.realTimeCostPrice = price2.toFixed(2)
					setTimeout(() => {
						this.barChart = echarts.init(document.getElementById("my_bar_chart"));
						this.init();
					}, 200)
				})
			},
			// 导出
			exportVersion(){
				this.download(
				  "/product_recipe_history/exportStatistics",
				  {
				    ...this.queryParams,
				  },
				  `export_statistics_${new Date().getTime()}.xlsx`
				);
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>